<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Performance optimizations -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    
      <!-- Preload critical assets -->
  <link rel="prefetch" href="/models/scene-draco.glb">
  <link rel="preload" href="/sound/Conoid Tone.mp3" as="audio">
  <link rel="preload" href="/images/cd-loading.png" as="image">
  
  <!-- Preload custom fonts -->
  <link rel="preload" href="/fonts/Web437_IBM_VGA_9x14.woff" as="font" type="font/woff" crossorigin>
  <link rel="preload" href="/fonts/sysfont.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- Prefetch non-critical assets -->
    <link rel="prefetch" href="/images/environment.jpg">
    <link rel="prefetch" href="/exrs/blue_photo_studio_2k.exr">
    
    <!-- DNS prefetch for external domains -->
    <link rel="dns-prefetch" href="//vercel.com">
    
    <!-- Resource hints -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <title>Jake's Compact Disc</title>
    
    <!-- Favicon optimizations -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
    
    <!-- OpenGraph and meta tags -->
    <meta name="description" content="Jake's interactive 3D portfolio experience">
    <meta property="og:title" content="Jake's Compact Disc">
    <meta property="og:description" content="An interactive 3D portfolio experience">
    <meta property="og:image" content="/og-image.png">
    <meta property="og:type" content="website">
    
    <!-- Performance hints -->
    <meta name="theme-color" content="#000000">
    
    <style>
      /* Critical CSS inlined for faster loading */
      @font-face {
        font-family: 'IBM_VGA';
        src: url('/fonts/Web437_IBM_VGA_9x14.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      
      @font-face {
        font-family: 'Sysfont';
        src: url('/fonts/sysfont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
        background: #000;
        font-family: 'IBM_VGA', monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }
      
      #root {
        width: 100%;
        height: 100%;
      }
      
      /* Loading screen optimization */
      #loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        color: white;
        font-size: 18px;
      }
      
      /* Prevent FOUC */
      .lg\:hidden { display: none !important; }
      @media (max-width: 1023px) {
        .lg\:hidden { display: block !important; }
        .lg\:block { display: none !important; }
      }
      
      /* Ensure 3D HTML elements don't inherit wrong styles */
      .macos {
        font-family: 'Sysfont', monospace, sans-serif !important;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <!-- SSR loading screen for instant feedback -->
      <div id="loading-screen">
        <div>Loading Jake's Compact Disc...</div>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
